import {MyNavBar, ShowLoading} from '@/components'
import {BsFillPersonFill, BsHouseDoorFill, BsPhone, BsClockFill} from 'react-icons/bs'

import './index.less'
import {useDetailHook, useListHook} from '@/hooks'
import {
  _delFollow,
  _getCommentMy,
  _getCommentYours,
  _getUserInfo,
  _getUserInfoYours,
  _isFollow,
  _postFollow,
  _delComment
} from './store'
import {ActivityIndicator, Flex, WhiteSpace, Button, Toast, Modal} from 'antd-mobile'
import {queryString, timer} from '@/utils'
import CommentItem from './components/commentItem'
import {history} from 'umi'
import {useStoreHook} from 'think-react-store'
import {useEffect, useState} from 'react'

const alert = Modal.alert


function UserDetail() {

  const {user: {user}} = useStoreHook()

  const [ isMy, setIsMy ] = useState(false)

  const id = queryString('id')
  let func = null
  let func1 = null
  if (id) {
    func = _getCommentYours.bind(null, id)
    func1 = _getUserInfoYours.bind(null, id)
  } else {
    func = _getCommentMy
    func1 = _getUserInfo

  }

  useEffect(() => {
    if (id) {
      setIsMy(false)
    } else {
      setIsMy(true)
    }
  }, [])

  let reset = null
  const resetFunc = (resetTemp) => {
    reset = resetTemp
  }

  const {data, showLoading, loading: commentLoading} = useListHook({func, resetFunc})

  let handleSearch = null

  const searchFunc = (onSearch) => {
    handleSearch = onSearch
  }

  const {detailData: isFollow} = useDetailHook({func: _isFollow.bind(null, id || user?.id), searchFunc})

  const {detailData, loading} = useDetailHook({func: func1})

  const handleClick = async (status) => {
    let result = null
    if (status) {
      result = await _postFollow(id)
    } else {
      result = await _delFollow(id)
    }
    if (result) {
      handleSearch()
      Toast.success('操作成功')
    }
  }

  const handleDelete = (id) => {
    alert('删除', '你确定要删除此论坛吗？', [
      {text: '取消'},
      {
        text: '确认', onPress: async () => {
          const result = await _delComment(id)
          if (result) {
            Toast.success('删除成功')
            reset()
          }
        }
      }
    ])
  }

  return (
    <div>
      <MyNavBar title={detailData?.user?.nickName + '的个人主页'}/>
      <div className='user-detail'>
        {loading ? <ActivityIndicator toast/> : <div className='user-item'>
          <div className='header'>
            <img src={detailData?.avatar || require('@/assets/user.png')}/>
            <div className='header-info'>
              <p className='title'>{detailData?.user?.nickName}</p>
              <Flex>
                <Flex.Item>
                  <p><BsFillPersonFill/>{detailData?.firstName + detailData?.secondName}</p>
                </Flex.Item>
                <Flex.Item>
                  <p><BsHouseDoorFill/>{detailData?.area?.name}</p>
                </Flex.Item>
              </Flex>
              <p><BsPhone/>{detailData?.phoneNum}</p>
              <p><BsClockFill/>{timer(detailData?.createdAt)}</p>
            </div>
          </div>
          <div className='key-value'>
            <span className='key'>具体家庭地址：</span>
            <span className='value'>{detailData?.address}</span>
          </div>
          <div className='key-value'>
            <span className='key'>个人描述：</span>
            <span className='value'>{detailData?.description}</span>
          </div>
        </div>}
        {id && id != user.id && <div>
          <WhiteSpace size='lg'/>
          {isFollow?.flag ? <Button type='warning' onClick={() => {
            handleClick(0)
          }}
          >取消关注</Button> : <Button type='primary' onClick={() => {
            handleClick(1)
          }}
          >关注</Button>}
          <WhiteSpace size='lg'/>
        </div>}
        {!commentLoading && data.map(item => (
          <CommentItem isMy={isMy} handleClick={(id) => {
            history.push({pathname: '/comment/comment', query: {id}})
          }} handleDelete={handleDelete} key={item.id} comment={item}/>
        ))}
        <ShowLoading showLoading={showLoading}/>
      </div>
    </div>
  )
}

export default UserDetail
